<template>
  <div>
    <!-- 标题 -->
    <van-cell
      title="搜索历史"
      value="内容"
    >
      <van-icon
        v-if="!isDel"
        name="delete-o"
        @click="isDel=true"
      ></van-icon>
      <template v-else>
        <span @click="history.splice(0)">全部删除</span>
        <span
          @click="isDel=false"
          style="margin-left: 10px;"
        >完成</span>
      </template>
    </van-cell>
    <!-- 搜索历史 -->
    <van-cell
      :title="item"
      v-for="(item,index) in history"
      :key="item"
      @click="clickHistory(index,item)"
    >
      <van-icon
        v-if="isDel"
        name="close"
      ></van-icon>
    </van-cell>

    <!-- 通用错误 history 的长度为0 时显示 -->
    <van-empty
      v-if="!history.length"
      image="error"
      description="暂无搜索历史"
    />
  </div>
</template>

<script>

export default {
  // 父组件传到子组件的搜索框的值
  props: {
    history: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      // 是否处于删除的状态  默认是 非删除
      isDel: false
    }
  },
  methods: {
    // 点击了搜索历史
    clickHistory (index, item) {
      // 如果isDel处于true  进行删除  依赖索引  数据准备好
      if (this.isDel) {
        this.history.splice(index, 1)
      } else {
        // 如果isDel处于false  进行搜索
        this.$emit('search', item)
      }
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {},
  created () { },
  mounted () { }
}
</script>

<style scoped lang='less'>
</style>
